<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">我的参与</view>
		</cu-custom>
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">功能模块</text>
				<text class="bg-green" style="width:4rem"></text>
			</view>
		</view>
		<view class="cu-list grid col-3">
			<view class="cu-item" @click="toActivityTimeLine">
				<view class="cuIcon-camera lg text-green"></view>
				<text>活动时间轴</text>
			</view>
			<view class="cu-item" @click="toHistory">
				<view class="cuIcon-favor lg text-green"></view>
				<text>历史参与</text>
			</view>
		</view>
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">我的参与</text>
				<text class="bg-green" style="width:4rem"></text>
			</view>
		</view>
		<view class="cu-card article" v-for="(item, index) in activityList" :key="item.id">
			<view class="cu-item shadow" style="border: 2upx solid lightgray;" @click="activityClick(item.id)">
				<view class="title justify-between flex">
					<view class="text-cut">{{item.title}}</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-attentionfill margin-lr-xs text-green"></text>{{item.view}}
						<text class="cuIcon-messagefill margin-lr-xs text-green"></text>{{item.comment}}
						<text class="cuIcon-hotfill margin-lr-xs text-green"></text>{{item.hot}}
					</view>
				</view>
				<view class="content">
					<image :src="url + '/image/' + item.photo" mode="aspectFill">
					</image>
					<view class="desc">
						<view class="text-content">{{item.content}}</view>
						<view>
							<view class="cu-tag bg-red light sm round" style="font-family: 'TsangerYuYangT W03';">
								{{item.time}}
							</view>
							<view class="cu-tag bg-green light sm round" style="font-family: 'TsangerYuYangT W03';">
								{{item.place}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white justify-center">
			<view class="action">
				<text class="cuIcon-pullup text-green"></text>
				<text>没有更多了哦</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				url: this.url,
				activityList: [
				// 	{
				// 	_id: '01',
				// 	title: '金秋艺术节',
				// 	content: '一年一度的金秋艺术节等你来参加, 名额有限, 速来报名!',
				// 	time: '9月18日上午9点',
				// 	place: '梅园操场',
				// 	category: '文体活动',
				// 	watch: 0,
				// 	comment: 0,
				// 	hot: 0,
				// 	imgList: [
				// 		'https://tse3-mm.cn.bing.net/th/id/OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK?pid=ImgDet&rs=1',
				// 		'https://ts1.cn.mm.bing.net/th/id/R-C.e09c9ac88d6a159bcdafbb98b96c451d?rik=SAD5AFJYGB6qRg&riu=http%3a%2f%2fwww.2qqtouxiang.com%2fpic%2fTP4545_04.jpg&ehk=RSDt%2foDClYGXoARgxoyuakHTbDGuWLlxiMeKoGOVQKs%3d&risl=&pid=ImgRaw&r=0'
				// 	]
				// }, {
				// 	_id: '02',
				// 	title: '清泉计划',
				// 	content: '在亲近大自然的过程中学会更多环境保护的知识!',
				// 	time: '10月25日下午3点',
				// 	place: '教五102',
				// 	category: '讲座',
				// 	watch: 0,
				// 	comment: 0,
				// 	hot: 0,
				// 	imgList: [
				// 		'https://pic3.zhimg.com/v2-c6ae9c3aff36b9b221258f6a90577902_r.jpg',
				// 		'https://www.haoy99.com/FileUpload/2019-02/Shui1Zhu11i1Pao1pptB-173234_109.jpg'
				// 	]
				// },
				],
				// numOfActivity: 2,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			activityClick(id) {
				uni.navigateTo({
					url: '/pages/activityDetail/activityDetail?id=' + id
				})
			},
			toActivityTimeLine() {
				uni.navigateTo({
					url: '/pages/activityTimeLine/activityTimeLine'
				})
			},
			toHistory(){
				uni.navigateTo({
					url: '/pages/historyActivity/historyActivity'
				})
			}
		},
		onLoad() {
			uni.request({
				method: 'GET',
				url: this.url + '/joinActivity',
				header: {
					Authorization: 'Bearer ' + this.userInfo.token
				},
				data: {
					userId: this.userInfo.userId
				},
				success: (res) => {
					console.log(res);
					if (res.statusCode == 200) {
						this.activityList = res.data
					}
				}
			})
		}
	}
</script>

<style>
</style>
